<!-- 团队主页------------------- -->
<template>
	<view class="institution-container">
		<!-- 团队头部信息 -->
		<view class="header">
			<image class="institution-icon" :src="teamhomeData?.avatar">
			</image>
			<view class="info-wrap">
				<view class="name">
					{{ teamhomeData.name }}
				</view>
				<navigator
					:url="'/homepackge/pages/organizationalPage/organizationalPage?orgId=' + (teamhomeData.organizationId?._id || '')">
					<view class="address">
						所属机构：{{ teamhomeData.organizationId?.name }}
						<image class="arrow-icon" src="/static/arrow-right.png"></image>
					</view>
				</navigator>
				<view class="number">
					签约人数：<span style="color: #2984F8;">{{ teamhomeData.signNumber }}</span>
				</view>
				<!-- 星星-------------------- -->
				<view class="contact">
					<rate-star :rating="teamhomeData.rate"></rate-star>
				</view>
			</view>
		</view>
		<view class="cardone-middle">
			<text class="service-tag" v-for="item in teamhomeData.tagIds" :key="item.id"
				:style="{ backgroundColor: '#3DD4A733', color: '#3DD4A7' }">
				{{ item.name }}
			</text>
		</view>
		<!-- 团队医生---------------------- -->
		<teamdaoctor :teamhomeData="teamhomeData"></teamdaoctor>
		<!-- 服务包----------------------------------------- -->
		<servicepack :teamhomeData="teamhomeData"></servicepack>
		<!-- 申请签约跳转另一个页面---------------------------- -->
		<view class="popup-open">
			<button class="Contract-Signing" @click="goToApplyContract">申请签约</button>
		</view>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		getDoctorDetailApi
	} from '../../../api/doctor';
	const teamhomeId = ref('');
	const teamhomeData = ref([]);
	// const orgId = ref(''); // 保存机构ID

	onLoad((options) => {
		teamhomeId.value = options.teamId;
		// orgId.value = options.orgId;
		getDoctorDetail();
	})
	// 获取团队详情
	function getDoctorDetail() {
		getDoctorDetailApi({
			_id: teamhomeId.value
		}).then(res => {
			if (res.code === 200) {
				teamhomeData.value = res.data;
			}
		})
	}

	// 跳转到申请签约页面
	const goToApplyContract = () => {
		let organizationId = orgId.value;

		// 如果页面参数中没有机构ID，则使用团队数据中的机构ID
		if (!organizationId && teamhomeData.value && teamhomeData.value.organizationId) {
			organizationId = teamhomeData.value.organizationId._id;
		}

		// 默认选择团队长作为医生
		const doctorId = teamhomeData.value.leaderId?._id || teamhomeData.value.leaderId;

		if (organizationId && doctorId) {
			uni.navigateTo({
				url: `/homepackge/pages/apply-contract/apply-contract?organizationId=${organizationId}&doctorId=${doctorId}&teamId=${teamhomeData.value._id}`
			});
		} else {
			uni.showToast({
				title: '团队信息不完整',
				icon: 'none'
			});
		}
	}
</script>

<style scoped>
	/* 整体容器 */
	.institution-container {
		padding: 10rpx;
		background-color: #fff;
	}

	.header {
		display: flex;
		margin-bottom: 30rpx;
	}

	.institution-icon {
		width: 240rpx;
		height: 240rpx;
		margin-right: 24rpx;
		border-radius: 16rpx;
		border: 2rpx solid #E6F2FF;
	}

	.info-wrap {
		flex: 1;
	}

	.name {
		font-size: 32rpx;
		line-height: 24rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.address {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #999999;
		line-height: 54rpx;
		margin-bottom: 16rpx;
	}

	.number {
		font-size: 24rpx;
		color: #999999;
		line-height: 54rpx;
		margin-bottom: 16rpx;
	}

	.arrow-icon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 8rpx;
		opacity: 0.6;
	}

	.contact {
		display: flex;
		gap: 16rpx;
	}




	.cardone-middle {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 16rpx;
	}

	.service-tag {
		display: inline-block;
		padding: 8rpx 30rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-top: 8rpx;
		margin-right: 16rpx;
		white-space: nowrap;
	}

	/* 签约------------- */
	.popup-open {
		height: 44rpx;
		margin: 5rpx 20rpx;

	}

	.Contract-Signing {
		width: 650rpx;
		background-color: #2984f8;
		color: #fff;
	}
</style>